<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>


<body>
    <div class="container">
  <!-- 头部（固定高度） -->
  <header class="header">Header</header>
  
  <!-- 中间内容容器 -->
  <div class="content">
    <!-- 区域1：自适应高度 -->
    <section class="section section-1">Area 1
        <div>
            这部分内容自适应
        </div>
    </section>
    
    <!-- 区域2：固定高度 + 内部滚动 -->
    <section class="section-2">
      <div class="scroll-wrapper">
        <!-- 实际内容（可能超出高度） -->
        <div class="content-list">
          <div class="item">Area 2部分内容超出固定高度可以上下滚动</div>
          <div class="item">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</div>
          <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem similique nesciunt quod praesentium dolor maiores. Sint quidem tenetur ipsum iusto enim id ex ducimus magni, maxime dolore? Repellat, maiores explicabo?
          Laudantium iusto deserunt sequi laborum aspernatur, voluptas minima adipisci, cumque nam suscipit nobis possimus nulla optio quaerat vitae facere porro velit soluta. Neque repudiandae eos, praesentium adipisci tempora excepturi voluptates.
          Placeat aperiam voluptatibus in numquam reprehenderit, iusto, dolorem adipisci facilis soluta quas alias, tempora corporis beatae. Nisi debitis aspernatur adipisci, dolorum repellendus iste, veniam quo incidunt, voluptatum quasi ab dignissimos.
          Est doloremque magnam quibusdam aliquam voluptatem voluptatibus quisquam fugiat doloribus non nesciunt, quia quaerat voluptas suscipit facilis soluta natus a voluptates ipsam possimus, porro commodi adipisci nemo, nulla aspernatur! Rem?
          Cum illum, quidem nam numquam nesciunt ducimus deserunt tempore, hic suscipit voluptatum nostrum voluptas quos perferendis. Sapiente blanditiis eaque debitis excepturi minima laborum mollitia eos, aliquid delectus veniam repellendus ratione?
          Doloribus illum ex distinctio reprehenderit quos voluptatum suscipit dolorem architecto. Iste, alias atque eaque autem assumenda beatae provident eius totam quo exercitationem neque fugit, quod culpa minima pariatur nostrum laudantium!
          Ipsa asperiores sapiente id ea odit, veritatis enim aspernatur hic eligendi unde illum accusantium rerum dolore optio magni quam rem totam animi sint harum alias non? Iusto voluptates magni ipsa.
          Ullam qui magni, nihil similique blanditiis mollitia et illum ea quia, nisi consequuntur voluptas? Ab expedita magni consectetur fugiat dicta culpa, natus iure cupiditate at esse repellendus explicabo atque cum!
          Facilis, assumenda soluta beatae sapiente tempora qui eveniet doloribus nostrum. Nobis et facilis modi eveniet cupiditate quasi fugiat sit eaque doloribus maiores deserunt quos similique magnam odio, nesciunt voluptates vitae!
          Totam dolorem eaque autem ipsam amet magni, voluptatem rerum repudiandae nihil debitis, quaerat aperiam dolore quos suscipit neque. Deserunt illo, officiis distinctio autem mollitia enim at vero sunt dicta impedit?
          Blanditiis cumque dolores, suscipit ipsam sit consequuntur impedit exercitationem odio fugiat quisquam libero voluptatibus reiciendis quaerat aliquid expedita cupiditate nesciunt architecto officia voluptatem incidunt? Ea repudiandae dolore omnis? Adipisci, voluptatem.
          Molestiae libero, reiciendis tempore quas similique, dolores, error aliquam doloribus eos ratione nesciunt aliquid soluta alias vel hic accusamus omnis ea! Est id culpa architecto labore sequi eveniet aliquam velit.
          Consequuntur placeat rem veniam natus cumque est omnis eos illo doloremque iure ipsa modi fuga at temporibus eaque incidunt voluptatem quibusdam eligendi facere explicabo repellat, harum sequi consequatur. Corrupti, et?
          Est nam optio consequatur modi quisquam sapiente facilis voluptas veniam cumque recusandae, unde vitae cum? Enim dolor modi minus ducimus ipsam vitae, ut aliquam nisi reiciendis laborum? Cupiditate, fuga molestiae.
          Quam harum ad cum molestiae error doloremque quo libero accusamus, accusantium ducimus nemo a voluptatem voluptatum debitis alias! Ex soluta autem itaque pariatur voluptates consectetur ipsum recusandae qui in ipsam?
          Nam voluptatem reprehenderit impedit maxime ea? Cupiditate odio eveniet aperiam maiores! Voluptate consectetur, voluptas aliquam voluptatibus magni sit optio quaerat ipsum explicabo. Facilis sapiente praesentium quae tenetur laboriosam porro quidem?
          Veritatis, sequi eaque, architecto, excepturi minus mollitia nihil et asperiores nulla delectus labore. Voluptates, quis? Distinctio ex nostrum, numquam voluptas enim praesentium aliquam amet ducimus necessitatibus perspiciatis eius dignissimos nulla?
          Officiis asperiores hic consectetur ipsum perferendis temporibus doloremque inventore! Suscipit voluptatem nisi neque non distinctio. Aspernatur dolorum voluptate quas asperiores enim, consequuntur tempora! Delectus fugit consectetur recusandae aperiam sint molestias!
          Unde explicabo dolor maiores aut. Assumenda sint reiciendis cupiditate ut explicabo amet impedit, id ea quos voluptatem at sapiente autem nobis aspernatur, placeat dolorum. Voluptates voluptatibus suscipit commodi dolorum impedit.
          Minima, eveniet, corrupti aliquid fugiat voluptates itaque accusantium quia dolorum veniam accusamus ratione officia tempore! Corrupti porro doloribus modi minima, adipisci repellat accusantium inventore, suscipit cumque sapiente, eos est eaque.</div>
          <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat error nam ipsam aliquam neque porro laudantium sapiente maiores quisquam similique, quae dolores cumque. Porro quae et alias laboriosam exercitationem eos!
          Doloribus fugiat nisi enim id assumenda cum voluptas, nesciunt sequi porro ipsa rerum numquam cumque excepturi ipsum cupiditate est magnam iure voluptate! Eos eum consequatur quisquam possimus officia id fugiat?
          Ipsum mollitia reiciendis necessitatibus ipsam odio esse, nulla libero eum dolore, quis repellat, deserunt cum. Similique, modi architecto minima doloremque molestiae, officia maxime doloribus odit saepe assumenda corrupti voluptates eum?
          Necessitatibus, obcaecati natus? Reiciendis, laboriosam voluptatum ea, aut voluptatem cumque placeat aliquam assumenda aperiam doloremque totam corrupti odit quibusdam, officiis officia fugit cupiditate consequuntur ipsum! Ea repellat quaerat necessitatibus in?
          Ea quas aut suscipit ipsum rem explicabo natus nostrum facilis, amet recusandae neque atque libero fugiat aliquam repellendus numquam assumenda dolor voluptates! Consectetur dolores minima voluptate molestiae quasi rerum aperiam?
          Recusandae ducimus qui quas commodi voluptas explicabo cupiditate adipisci odit neque molestiae, excepturi debitis porro sunt, similique temporibus? Iusto, ratione? Corrupti quia labore totam rerum quis magnam eos consequatur ratione.
          Possimus consequuntur tenetur officia fugiat ad nostrum veritatis eveniet suscipit, dolorum ratione. Cumque id iste, enim, quo corporis a aspernatur minus officia commodi, reprehenderit nobis nemo ab voluptate eveniet delectus!
          Architecto ipsa ea mollitia alias consequatur dolore neque vitae tempora dolor quidem blanditiis rerum natus fuga sapiente consectetur, inventore ullam beatae quae libero doloribus delectus iusto repudiandae esse! Veritatis, dolore.
          Aperiam porro earum quidem amet ad iste asperiores tempore placeat, magnam ipsum pariatur ducimus obcaecati impedit quas suscipit facilis. Quod, tempore incidunt. Vitae, enim similique veritatis ex repudiandae deserunt voluptatibus.
          Perspiciatis, earum. Animi ea rerum voluptates hic enim beatae magnam ipsam vero, quidem minima quasi, praesentium id veritatis consequatur recusandae ipsum corporis deleniti quod iste vel officiis voluptas cupiditate! Eius?
          Consectetur nesciunt veniam error inventore quis ducimus numquam similique cupiditate, est voluptate! Maiores debitis temporibus repudiandae corporis officiis nam odit sed architecto eius. Deserunt illum voluptas, distinctio ullam consequatur asperiores.
          Assumenda fugit sunt, omnis in soluta sapiente impedit iste perferendis dicta minima nobis eligendi consequuntur incidunt dolore laboriosam nulla nihil, quae quas nostrum delectus eos iure! Neque eveniet excepturi recusandae?
          Possimus molestiae recusandae eveniet alias architecto cum, a dignissimos iure vel molestias, fugiat reiciendis, atque repudiandae quae maxime voluptas impedit quaerat nostrum officia dolore consequuntur ipsa aperiam quibusdam ipsum. Delectus.
          Obcaecati fugit odit voluptatem quas rem voluptas facere ut distinctio ipsam suscipit, consequuntur aperiam numquam repellendus dignissimos amet facilis pariatur. Nemo eligendi ab magnam qui at voluptatem quae beatae doloribus?
          Optio dolores et rerum molestiae, delectus provident at libero repellat repellendus sed omnis nihil consequuntur necessitatibus rem, inventore veniam. Dicta reiciendis, repudiandae modi quidem placeat cumque numquam nisi similique ipsa.
          Esse ex enim illum eum rem praesentium culpa quas, accusamus doloribus minus itaque adipisci tempore. Voluptatum magni eligendi tempore veritatis blanditiis, nihil quod aut possimus obcaecati, quasi omnis numquam unde?
          Quod error, iusto eius ad adipisci, magni at dolorum praesentium sequi obcaecati tenetur dicta, consequatur autem deleniti soluta repellendus! Quis perspiciatis dicta fuga quae, eligendi veritatis error minus quos fugiat?
          Porro, quisquam! Optio totam corporis iure? Quaerat tempore recusandae vel reprehenderit in non earum? Adipisci, odit rerum molestiae necessitatibus sequi et repudiandae corporis distinctio, quibusdam provident id alias? Corrupti, ullam.
          Maxime possimus in quas molestiae architecto sit laboriosam quasi iusto porro? Asperiores earum explicabo temporibus cum, placeat iusto ipsam corporis quaerat animi architecto dolore error quibusdam cupiditate eaque aliquam vel.
          Quaerat nostrum deserunt sapiente ea eligendi atque harum magnam unde. Tempora, dolores, deserunt atque consectetur error sed nam impedit quasi quae porro voluptatibus maiores, expedita inventore distinctio odit voluptates obcaecati.</div>
          <!-- 更多内容... -->
        </div>
      </div>
    </section>
    
    <!-- 区域3：自适应高度 -->
    <section class="section section-3">Area 3</section>
  </div>
  
  <!-- 底部（固定高度） -->
  <footer class="footer">Footer</footer>
</div>

</body>
</html>






